<script setup lang="ts">
import { ref, shallowRef, onBeforeMount } from 'vue'
import Detail from './detail.vue'
import { useTableMixin, dateRangeFieldName } from '@/hooks/useTableMixin'
import { actionKeys } from '@/common/config'
import { getStatusTextByHRender } from '@/common/utils'
import { getLogPageApi, deleteLogApi, getSuccessStatus } from '@/api/log'
import { getDictionaryListApi } from '@/api/dictionary'

const columns = shallowRef<TableColConfig[]>([
	{
		label: '复选框列',
		prop: 'selection',
		columnKey: 'selection',
		type: 'selection',
		width: 55,
		fixed: 'left',
		align: 'center',
	},
	{
		label: '操作描述',
		prop: 'title',
		columnKey: 'title',
		width: 120,
		align: 'center',
	},
	{
		label: '状态',
		prop: 'status',
		columnKey: 'status',
		width: 120,
		align: 'center',
		contentRender: ({ row }) => {
			return row.status ? getStatusTextByHRender('正常', 'success') : getStatusTextByHRender('异常', 'danger')
		},
	},
	{
		label: '业务类型',
		prop: 'businessType',
		columnKey: 'businessType',
		width: 120,
		align: 'center',
	},
	{
		label: '方法名称',
		prop: 'method',
		columnKey: 'method',
		width: 120,
		align: 'center',
		showOverflowTooltip: true,
	},
	{
		label: '请求方式',
		prop: 'requestMethod',
		columnKey: 'requestMethod',
		width: 120,
		align: 'center',
	},
	{
		label: '操作人类别',
		prop: 'operatorType',
		columnKey: 'operatorType',
		width: 120,
		align: 'center',
	},
	{
		label: '操作人员',
		prop: 'operName',
		columnKey: 'operName',
		width: 120,
		align: 'center',
	},
	{
		label: '部门名称',
		prop: 'deptName',
		columnKey: 'deptName',
		width: 120,
		align: 'center',
	},
	{
		label: '请求url',
		prop: 'operUrl',
		columnKey: 'operUrl',
		width: 120,
		align: 'center',
		showOverflowTooltip: true,
	},

	{
		label: '请求ip',
		prop: 'operIp',
		columnKey: 'operIp',
		width: 120,
		align: 'center',
		showOverflowTooltip: true,
	},
	{
		label: '请求参数',
		prop: 'operParam',
		columnKey: 'operParam',
		width: 120,
		align: 'center',
		showOverflowTooltip: true,
	},
	{
		label: '返回参数',
		prop: 'jsonResult',
		columnKey: 'jsonResult',
		width: 120,
		align: 'center',
		showOverflowTooltip: true,
	},
	{
		label: '错误信息',
		prop: 'errorMsg',
		columnKey: 'errorMsg',
		width: 120,
		align: 'center',
		showOverflowTooltip: true,
	},
	{
		label: '操作时间',
		prop: 'operTime',
		columnKey: 'operTime',
		width: 120,
		align: 'center',
	},

	{
		label: '操作',
		prop: 'operation',
		columnKey: 'operation',
		fixed: 'right',
		resizable: false,
		align: 'center',
		disabled: true,
		// width: 128,
	},
])

const searchOptions = ref<SearchOptionType[]>([
	{ type: 'input', id: 'title', props: { label: '操作描述' } },
	{ type: 'input', id: 'method', props: { label: '方法名称' } },
	{ type: 'input', id: 'operName', props: { label: '操作人员' } },
	{
		type: 'select',
		id: 'status',
		props: { label: '状态' },
		innerComponentProps: {
			clearable: true,
			filterable: true,
			options: [
				{ label: '正常', value: 1, disabled: false },
				{ label: '异常', value: 0, disabled: false },
			],
		},
	},
	{
		type: 'select',
		id: 'businessType',
		props: { label: '业务类型' },
		innerComponentProps: {
			clearable: true,
			filterable: true,
			options: [],
		},
	},
	{ type: 'date-range', id: dateRangeFieldName, props: { label: '操作时间' }, innerComponentProps: { showTime: false } },
])

const {
	basicPaginationConfig, // 表格分页基础配置
	tableRef, // 表格ref
	current, // 当前页码
	size, // 页尺寸
	total, // 总条数
	addRef, // 新增组件ref
	updateRef, // 更新组件ref
	detailRef, // 详情组件ref
	filterOptions, // 查询条件
	getData, // 获取页数据的方法
	tableHeight, // 表格高度
	addDialogVisible, //新增对话框显示隐藏状态
	updateDialogVisible, //更新对话框显示隐藏状态
	detailDialogVisible, // 详情对话框显示隐藏状态
	tableList, // 表格数据
	selectedRows, // 选中行数据
	editRow, // 当前编辑数据
	addDialogIsFull, // 新增对话框是否全屏的状态
	updateDialogIsFull, // 更新对话框是否全屏的状态
	detailDialogIsFull, // 详情对话框是否全屏的状态
	fixedColWidth, // 固定列列宽
	handleSearchPanelcollapsed, //search-panel组件的 @collapsed 的处理函数
	handleSearch, // 搜索处理函数
	handleReset, // 重置表格数据处理函数
	handlePaginationChange, // 处理分页器变化处理函数
	handleColumnsChange, // 表头变化组件的处理函数
	handleAdd, // 点击新增按钮回调
	handleUpdate, // 点击更新按钮回调
	handleSeeDetail, // 点击详情按钮回调
	handleDelete, // 删除处理函数
	handleSelectedRowChange, // 表格选中行变化的回调
	handleImport, // 导入表格处理函数
	handleExport, // 导出表格数据处理函数
	handleAddCommit, // 新增提交处理函数
	handleUpdateCommit, // 更新提交处理函数
} = useTableMixin<LogType>({
	columns,
	listApiFunc: getLogPageApi,
	deleteApiFunc: deleteLogApi,
	actionList:[actionKeys.delete],
	noNeedAuthBtnNumInFixCol: 1,
	query_after: () => {},
	search_after: () => {},
})

onBeforeMount(() => {
	getRequestAuthList()
})

async function getRequestAuthList() {
	const res = await getDictionaryListApi({ categoryName: 'requestAuth' })
	if (res.code == getSuccessStatus()) {
		const item = searchOptions.value.find((v) => v.id == 'businessType')
		if (item)
			item.innerComponentProps!.options = res.data.map((v: DictionaryType) => {
				v.label = v.name
				return v
			})
	}
}
</script>

<template>
	<div class="logManage">
		<search-panel @collapsed="handleSearchPanelcollapsed" @search="handleSearch" @reset="handleReset" :options="searchOptions" />
		<div class="my-table-tool">
			<div class="tool-left">
				<el-button type="primary" style="margin-right: 5px" @click="handleExport" v-if="$hasAuth([actionKeys.export])">导出excel</el-button>
			</div>
			<div class="tool-right">
				<set-table-columns :list="columns" @confirm="handleColumnsChange" />
			</div>
		</div>
		<my-table
			ref="tableRef"
			border
			stripe
			:data="tableList"
			:columns="columns"
			style="width: 100%"
			class="myTable"
			rowKey="id"
			:maxHeight="tableHeight"
			@selection-change="handleSelectedRowChange"
			:pagination="{ ...basicPaginationConfig, current, size, total }"
		>
			<template #operation="{ row }">
				<el-button size="small" @click="handleSeeDetail(row)">详情</el-button>
				<el-popconfirm title="确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消" @confirm="handleDelete(row)" v-if="$hasAuth([actionKeys.delete])">
					<template #reference><el-button type="danger" size="small">删除</el-button></template>
				</el-popconfirm>
			</template>
		</my-table>

		<el-dialog v-model="detailDialogVisible" title="日志详情" width="80%" :modal="false" draggable :close-on-click-modal="false" align-center :fullscreen="detailDialogIsFull">
			<el-scrollbar :maxHeight="detailDialogIsFull ? 0 : $getDialogBodyMaxHeight()">
				<!--  套个div防止无论何时都出现横向滚动 -->
				<div style="padding: 0 10px">
					<Detail :edit-row="editRow" />
				</div>
			</el-scrollbar>
			<template #footer>
				<div class="dialog-footer" style="display: flex; justify-content: flex-end">
					<screen-full-toggle-icon @toggle="(v:boolean)=>{detailDialogIsFull=v}" />
					<el-button @click="detailDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="handleAddCommit">确定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<style scoped lang="scss"></style>
